<template>
  <div class="warp">
    <div class="left"></div>
    <div id="content" class="center">
      <div class="rule">
        <grid-layout
          ref="gridlayout"
          :layout.sync="layout"
          :col-num="colNum"
          :row-height="100"
          :is-draggable="true"
          :is-resizable="true"
          :responsive="true"
          :vertical-compact="true"
          :margin="[5, 10]"
          :use-css-transforms="true"
        >
          <grid-item
            v-for="item in layout"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
          >
            <span class="text">{{ item.i }}</span>
          </grid-item>
        </grid-layout>
      </div>
    </div>
    <div class="right"></div>
  </div>
</template>

<script lang="ts" setup>
const gridlayout = ref();
const layout = ref([
  { x: 0, y: 1, w: 4, h: 2, i: "0" },
  { x: 4, y: 1, w: 4, h: 2, i: "1" },
  { x: 8, y: 1, w: 4, h: 2, i: "2" },
  { x: 0, y: 2, w: 4, h: 2, i: "3" },
  { x: 4, y: 2, w: 4, h: 2, i: "4" },
  { x: 8, y: 2, w: 4, h: 2, i: "5" },
]);
const colNum = ref(12);
const index = ref(0);

onMounted(() => {});
const addItem = () => {
  // Add a new item. It must have a unique key!
  layout.value.push({
    x: (layout.value.length * 2) % (colNum.value || 12),
    y: layout.value.length + (colNum.value || 12), // puts it at the bottom
    w: 2,
    h: 2,
    i: index.value + "",
  });
  // Increment the counter to ensure key is always unique.
  index.value++;
};
</script>

<style scoped lang="scss">
.warp {
  display: flex;
  .left {
    width: 180px;
    height: 100vh;
    background-color: #987550;
  }
  .center {
    height: 100vh;
    position: relative;
    width: calc(100vw - 500px);
    overflow: overlay;
  }
  .right {
    height: 100vh;
    background-color: #187550;
    width: 320px;
  }
}
.rule {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f00;
  overflow-x: hidden;
  overflow-y: scroll;
}
.vue-grid-item.vue-grid-placeholder {
  background: green !important;
}
.vue-grid-layout {
  background: #eee;
  width: 90%;
  margin: 20px 5%;
}
.vue-grid-item:not(.vue-grid-placeholder) {
  background: #ccc;
  border: 2px solid #12c99c;
}
.vue-grid-item .resizing {
  opacity: 0.9;
}
.vue-grid-item .static {
  background: #cce;
}
.vue-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
}
.vue-grid-item .no-drag {
  height: 100%;
  width: 100%;
}
.vue-grid-item .minMax {
  font-size: 12px;
}
.vue-grid-item .add {
  cursor: pointer;
}
.vue-draggable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
    no-repeat;
  background-position: bottom right;
  padding: 0 8px 8px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: pointer;
}
</style>
